<template>
	<view class="detail-box">
		<view class="detail-top">
			<view class="circle">{{lxr_name.substring(0,1)}}</view>
			<view class="name">{{lxr_name}}</view>
			<view class="desc">
				<image src="https://img.bidcenter.com.cn/uni/qiqing/dianhua.png" mode="widthFix"></image>
				<view>
					<view class="tel">{{lxr_tel}}</view>
					<view class="time">更新时间：{{lxr_time}}</view>
				</view>
			</view>
		</view>
		
		<!-- 参与项目 -->
		<view class="canyuxiangmu" v-if="lxr_xmgl != 0">
			<view class="canyu-title">
				参与<text>{{lxr_xmgl&&lxr_xmgl>99 ?'99+' :lxr_xmgl}}</text>个项目
			</view>
			
			<view class="product-list" :class="{ hasVisited: showGray(item) }" v-for="(item, index) in xmList"
				:key="index" @click="() => toDetail(item)">
				<view class="productTitle ">
					<view class="newsType"
						:class="newsTypeBgMap[item.news_type] ? newsTypeBgMap[item.news_type] : 'redTag'">
						{{ item.news_type_des ? item.news_type_des : '未知'  }}
					</view>
					<!-- v-html='item.endTitle' -->
					<view class="title f30 text-ellipsis-2" style="font-weight: bold;">
						<u-parse :content="item.news_title_show" />
					</view>
				</view>
				<template v-if="typeInfo.zhaobiao.includes(item.news_type + '')">
					<view class="xmgk f24 d-f" v-if="item.yezhu && item.yezhu !='-' && !userInfo.isHuiyuan" >
						招标业主：<text style="filter: blur(5px);">{{item.yezhu.substring(0,8)}}</text>{{item.yezhu.slice(-2)}}<view class="lxfs">联系方式</view>
					</view>
					<view class="xmgk f24 d-f" v-if="item.yezhu && item.yezhu !='-' && userInfo.isHuiyuan">
						招标业主：<view class="text-ellipsis" v-html="item.yezhu"></view>
					</view>
				</template>
				<!-- <template v-if="typeInfo.zhongbiao.includes(item.news_type + '')">
					<view class="xmgk f24 d-f" v-if='item.yezhu'>
						<text class="text-ellipsis">供应商：{{ item.yezhu}}</text>
					</view>
				</template> -->
				<template v-if="typeInfo.zhongbiao.includes(item.news_type + '')">
					
					<view class="xmgk f24 d-f" v-if="item.news_zhongbiao &&  item.news_zhongbiao !='-' &&  !userInfo.isHuiyuan">
						供应商：<text style="filter: blur(5px);">{{item.news_zhongbiao.substring(0,8)}}</text>{{item.news_zhongbiao.slice(-2)}}<view class="lxfs">联系方式</view>
					</view>
					<view class="xmgk f24 d-f" v-if="item.news_zhongbiao  &&  item.news_zhongbiao !='-' && userInfo.isHuiyuan">
						<text class="text-ellipsis">供应商：{{ item.news_zhongbiao}}</text>
					</view>
				</template>
			
				<view class="leibie d-b-c">
					<view class="flex-1 d-f">
						<view class="label grayBlueTag2 f22 flexs blue"
							v-if="typeInfo.zhaobiao.includes(item.news_type + '') && (item.news_zbje_show !== '--' && item.news_zbje_show !== '')">
							{{ item.news_zbje_show }}
						</view>
						<view class="label grayBlueTag2 f22 flexs blue"
							v-if="typeInfo.zhongbiao.includes(item.news_type + '') && (item.news_zhongbiaojine_show !== '--' && item.news_zhongbiaojine_show !== '')">
							{{ item.news_zhongbiaojine_show }}
						</view>
						<view class="label grayBlueTag2 f22 gray6Tag">
							{{commonjs.diquStr(item.news_diqustr,item.news_areastr)}}
						</view>
						<!-- news_bstrue 附件标记 默认0 无附件 1 有标书 2 有附件  （可以解释为>0就有附件） -->
						<view class="label f22 grayBlueTag2" style="display: flex;align-items: center;"
							v-if="item.news_bstrue > 0">
							<!-- 2979ff #777 -->
							<u-icon name="attach" color="#6C717E" labelColor="#6C717E" size="32rpx" labelSize="22rpx"
								:label="item.news_bstrue === 1 ? '标书' : item.news_bstrue === 2 ? '附件' : ''"
								labelPos="right"></u-icon>
						</view>
					</view>
					<view class="shijian d-f">
			
						<text class="shijian-text f22">
							{{ commonjs.timeFrom2(item.news_star_time_show, 'yyyy-mm-dd') }}
						</text>
					</view>
				</view>
				<view class="xmgk f24 d-f" style="color: #FF1717;"
					v-if="(item.news_end_time !== null  && item.news_type == 2) || (item.news_end_time !== null  && item.news_type == 2)">
					截至时间：{{item.news_end_time !== null ? item.news_end_time.slice(0,10) : '' }} <text
						style="margin-left:50rpx;">详情请见信息</text>
				</view>
			</view>
			
			<list-loading :status.sync="status" :isBottom.sync="isBottom"
				:defindNull="!xmList.length" :listdata="xmList" >
				<view class="nullWrap" >
					<image src="https://img.bidcenter.com.cn/uni/zanwushuju.png" mode="aspectFit" >
					</image>
				</view>
			</list-loading>
		</view>
		
		<!-- 底部 -->
		<view class="footer" :style="{paddingBottom: bottomHight ==34 ? bottomHight+'px' :'34rpx'}">
			<view class="footer-left">
				<view class="item" @click="addPhone">
					<image src="https://img.bidcenter.com.cn/uni/qiqing/tongxunlu2.png" ></image>
					<view>添加到通讯录</view>
				</view>
				<view class="item" @click="copyTel">
					<image src="https://img.bidcenter.com.cn/uni/qiqing/fuzhi2.png"></image>
					<view>复制电话</view>
				</view>
			</view>
			<view class="footer-right" @click="makePhoneCall">
				<image src="https://img.bidcenter.com.cn/uni/qiqing/bohao.png" mode=""></image>
				<text>拨号</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		clickedObj
	} from '@/util/index.js';
	import commonjs from '@/common/script/common.js';
	export default {
		data() {
			return {
				commonjs,
				// 项目信息列表
				status: 'loading',
				page: 1,
				pageSize: 40,
				nomoreText: '已全部加载完毕',
				isBottom:false,
				xmList: [],
				clickedObj,
				clickid: '',
				lxr_name:'',
				lxr_tel:'',
				lxr_time:'',
				lxr_xmgl:'0',
				danweiType:'2',//2业主  5供应商  1代理
				// 安全距离
				bottomHight: 0,
				
				typeInfo: {
					'zhaobiao': ['1', '2', '5', '6', '7', '9', '17', '32'],
					'zhongbiao': ['4'],
					//'xiangmu': ['3', '10', '12', '13', '14', '15', '16', '90', '97', '98', '99'],
					// 20240108调整
					'xiangmu': ["3", "13", "10",  "12", "99", "90"],
					/**
					 * 20220602 和窦窦确认，进行项目类型的合并显示，目前仅用于 工程项目订阅列表页中的 类型显示 (即全部一栏)
					 * '3，13', '10', '12，99',  '90',
					 */
					'xiangmu2': ['3', '10', '12', '90'],
					// 结构化数据包服务，信息类型
					'shujubao': ['1', '4']
				},
				userInfo:uni.getStorageSync('userInfo') || {},
			}
		},
		
		computed: {
			showGray() {
				return item=> {
					let data = false;
					const id = item.njid ? item.njid : item.news_id
					if (item.njid) {
						data = this.clickedObj.pro.get() && this.clickedObj.pro.get().includes(item.njid);
					} else {
						data = this.clickedObj.bx.get() && this.clickedObj.bx.get().includes(item.news_id);
					}
					return data || this.clickid === item.id;
				}
			},
			
			newsTypeBgMap: function() {
				const obj = {}
				const ininData = this.xmList
				ininData.map(item => {
					/**
					 * 审批公示 17 orange1Tag
					 */
					if (item.news_type == '4') {
						obj[item.news_type] = 'redTag'
					} else if (item.news_type == '17') {
						obj[item.news_type] = 'orange1Tag'
					} else if (item.news_type == '13') {
						// 拟在建项目
						obj[item.news_type] = 'blue2Tag'
					} else if (item.news_type == '12') {
						// vip独家
						obj[item.news_type] = 'orange2Tag'
					} else if (item.news_type == '2') {
						// 招标预告
						obj[item.news_type] = 'purpleTag';
					} else if (item.news_type == '6') {
						// 招标变更
						obj[item.news_type] = 'pinkTag';
					} else if (item.news_type == '3') {
						// 拟建项目
						obj[item.news_type] = 'blue2Tag';
					} else if (item.news_type == '10') {
						// 项目审批
						obj[item.news_type] = 'orangeTag';
					} else {
						// 招标类型 参考信息90
						obj[item.news_type] = 'blueTag'
					}
				})
				return obj
			},
			
		
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			this.isBottom = true;
			if (this.xmList.length < this.pageSize) {
				return;
			}
			if (this.status !== 'nomore') {
				this.getList({
						page: ++this.page
					},
					true
				);
			}
		},
		onReady() {
			let app = uni.getSystemInfoSync()
			this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
			// console.log('屏幕底部安全距离', this.bottomHight) //34
		},
		onLoad(options) {
			// console.log(options)
			this.lxr_name=options.name
			this.lxr_tel=options.tel
			this.lxr_time=options.time
			this.lxr_xmgl=options.xmgl ?decodeURIComponent(options.xmgl):'0'
			this.danweiType=options.danweiType
			this.getList()
		},
		methods: {
			//获取项目信息
			getList(params = {}, loadmore) {
				// 非下拉加载时
				if (!loadmore) {
					this.status = 'loading';
					this.nomoreText = "努力加载中..."
					this.xmList = [];
				}
				let paramsNew ={}
				paramsNew = Object.assign({}, {
						location: 11143,
						time: 11, //3:近三天；7：近一周；30：近一月；90：近三月；180：近半年；11：近一年
						page: this.page,
						type:this.danweiType=='2' || this.danweiType=='1' ? '1' :'4',//2业主  5供应商  1代理----招标代理 1 供应商4
						pageSize: this.pageSize,
						keywords:this.lxr_tel,
					},
					params
				);
				
				uni.$u.http
					.post('/wechat/GetSearchListHandler.ashx', paramsNew)
					.then(rs => {
						const dt = rs.listData || [];
						if (!dt.length) {
							this.status = 'nomore'
							this.nomoreText = loadmore ? '已全部加载完毕' : '暂无数据'
							this.isBottom=false
						} else {
							if (dt.length < this.pageSize) {
								this.status = 'nomore'
								this.nomoreText = '已全部加载完毕'
							} else {
								
								this.status = 'loading'
								this.isBottom=false
							}
						}
						dt.map(item => {
							this.xmList.push(item);
						})
						if (paramsNew.page === 26 && (this.userInfo.hyJibie == '免费会员' || this.userInfo.hyJibie ==
							'游客')) {
							// this.showPopupMember = true
							this.status = 'nomore'
							this.nomoreText = '开通会员享受完整功能,多种类型会员等你选择'
							return
						}
						//如果是免费会员，则展示前三条
						if (this.userInfo.hyJibie == '免费会员' || this.userInfo.hyJibie =='游客'){
							this.xmList=this.xmList.slice(0,3)
						}
						
					})
			
			
			},
			//项目信息点击进详情
			toDetail(item) {
				const id=item.njid > 0 ? item.njid : item.news_id
				item.id= id
				this.clickid = id;
				let uri = encodeURIComponent(JSON.stringify(item));
				const xmDetailType = [3, 10, 12, 13, 90, 97, 98, 99];
				let url = '';
				if (xmDetailType.includes(item.news_type)) {
					clickedObj.pro.set(item.id);
					url='/pages/xiangmu/detail?ly=search=' + encodeURIComponent(uri);
				
				} else {
					clickedObj.bx.set(item.id);
					url='/pages/zhaobiao/detail?ly=search&data=' + encodeURIComponent(uri)
					
				}
				uni.navigateTo({
					url:url
				})
			
			},
			// 拨打电话
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.lxr_tel,
				});
			},
			
			// 复制电话号码
			copyTel() {
				uni.setClipboardData({
					data:  this.lxr_tel,
					success: () => {
					},fail:(err)=>{
						console.log(err)
					}
			
				})
			},
			// 添加到通讯录
			addPhone() {
				uni.addPhoneContact({
					firstName: this.lxr_name,
					mobilePhoneNumber: this.lxr_tel,
					success: function (e) {
						uni.$u.toast('添加成功');
					},
					fail: function (e) {
						uni.$u.toast('添加失败');
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/index.scss';
	@import '@/static/css/list.scss';
	@import '@/static/css/qiqing.scss';
	// @import '@/static/css/list.scss';

	.detail-box {
		min-height: 95vh;
		padding: 20rpx 28rpx 0;
		background: #FAFAFA !important;
	}
	
	.detail-top{
		padding: 62rpx 0 26rpx;
		background: #fff;
		.circle{
			width: 160rpx;
			height: 160rpx;
			line-height: 160rpx;
			margin: 0 auto;
			font-size: 72rpx;
			color: #fff;
			text-align: center;
			background: #2F6DFE;
			border-radius: 50%;
		}
		.name{
			margin-top: 40rpx;
			font-size: 36rpx;
			color: #333;
			text-align: center;
		}
		.desc{
			display: flex;
			margin-top: 76rpx;
			padding-left: 26rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-right: 18rpx;
			}
			view{
				.tel{
					font-size: 30rpx;
					color: #333333;
				}
				.time{
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #6C717E;
				}
			}
		}
	}
	.canyuxiangmu{
		margin-top: 24rpx;
		padding-bottom: 160rpx;
		.canyu-title{
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: #333;
			text{
				color: #2F6DFE;
			}
		}
	}
	.footer{
		width: 100%;
		padding: 34rpx 36rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		background: #fff;
		.footer-left{
			display: flex;
			flex: 1;
			justify-content: space-between;
			margin-right: 72rpx;
			image{
				width: 34rpx;
				height: 40rpx;
			}
			view{
				text-align: center;
				white-space: nowrap;
			}
			text{
				font-size: 28rpx;
				color: #6C717E;
			}
		}
		.footer-right{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 226rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #2F6DFE;
			border-radius: 4rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}
			text{
				font-size: 28rpx;
				color:#fff;
				font-weight: bold;
			}
		}
	}
</style>
